<script setup lang="ts">
import { ref } from 'vue';
import { useInfoStore } from '@/stores/info';
import { useRouter } from 'vue-router';
const router = useRouter()
const infoStore = useInfoStore()
const info = ref({
    name:'',
    sex:''
})
const rules = {
    name:[{ required: true, message: '请输入姓名', trigger: 'blur' }],
    sex:[{ required: true, message: '请选择性别', trigger: 'blur' }]
}

const submit = ()=>{
    infoStore.setName(info.value.name);
    infoStore.setSex(info.value.sex)
    router.back()
}
</script>
<template>
    <div class="main">
        <el-form :rules="rules" :model="info" label-width="auto" style="max-width: 600px" class="form" ref="form">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="info.name"/>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="info.sex" clearable placeholder="选择性别" style="width: 240px">
                    <el-option value="男"/>
                    <el-option value="女"/>
                </el-select>
            </el-form-item>
        </el-form>
        <div>
            <el-button type="primary" @click="submit">提交</el-button>
        </div>
    </div>

</template>
<style scoped>
    .main{
        overflow: hidden;
        margin: 0 auto;
        text-align: center;
        width: 200px;
    }
    .main .form
    {
        margin-top: 80px;
    }
</style>